<template>
  <div class="main-content next-manage-wrapper">
    <div class="filter-box">
      <p class="title">二代查询</p>

      <el-form
        :inline="true"
        :model="form">
        <div class="item">
          <el-form-item label="二代名称">
            <el-input
              v-model="form.nickname"
              placeholder="请输入"
              clearable
              @clear="searchFn"
               />
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input
              v-model="form.mobile"
              placeholder="请输入"
              clearable
              @clear="searchFn"
               />
          </el-form-item>
        </div>
        <div class="item">
          <!-- 邀请时间 -->
          <el-form-item label="加入时间">
            <el-date-picker
              v-model="form.date"
              type="daterange"
              range-separator="至"
              value-format="YYYY-MM-DD"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeDate" />
            </el-form-item>

          <div class="btn-box">
            <el-button
              type="primary"
              @click="searchFn">
              查询
            </el-button>
            <!-- 重置 -->
            <el-button
              type=""
              @click="restFn">
              重置
            </el-button>

          </div>
        </div>
      </el-form>
    </div>

    <div class="content-box">
      <div class="top-box">
        <el-button
          type="primary"
          @click="generateCodeFn">
          生成二代邀请码
        </el-button>
      </div>

      <ct-table :options="tableOptions">
        <template v-slot:index="scope">
          <span>{{ scope.row.index }}</span>
        </template>
        <template v-slot:realInfo="scope">
          <span>{{ scope.row.realInfo }}</span>
        </template>
        <template v-slot:operate="scope">
          <el-text
            type="primary"
            @click="toDetail(scope.row)">
            详情
          </el-text>
        </template>
      </ct-table>

      <ct-pagination
        :options="pageOptions"
        :pageEvent="getListData">
      </ct-pagination>
    </div>

    <Code
      v-model:show="operateData.show"
      :data="operateData.data"
      v-if="operateData.show" />
  </div>
</template>

<script setup>
  import Code from './dialog/Code.vue';

  import { getPartnerList,getPartnerListV2 } from '@/api';

  import { useRouter } from 'vue-router';
  const router = useRouter();

  const { proxy } = getCurrentInstance();

  import CtTable from '@/components/CtTable.vue';
  import CtPagination from '@/components/Pagination.vue';

  import { usePageOptions } from '@/hooks/usePageOptions';
  const { pageOptions } = usePageOptions();

  function generateCodeFn() {
    operateData.show = true;
  }

  let operateData = reactive({
    show: false,
    data: {}
  });

  let form = ref({
    nickname: '',
    mobile: '',
    date: '',
    start: '',
    end: '',
  });

  function toDetail(row) {
    console.log(row);
    router.push({
      name: 'nextDetail',
      query: {
        id: row.id
      }
    });
  }

  let tableOptions = reactive({
    data: [],
    loading: false,
    columns: [
      {
        label: '序号',
        prop: 'index',
        width: 80,
        isCustom: true
      },
      {
        label: '二代名称',
        prop: 'nickname'
      },
      {
        label: '联系方式',
        prop: 'mobile'
      },
      {
        label: '直客数量',
        prop: 'customerCount'
      },
      {
        label: '是否实名',
        prop: 'realInfo',
      },
      {
        label: '操作',
        prop: 'operate',
        isCustom: true
      }
    ]
  });
  function changeDate(value) {
    if (value) {
      form.value.start = value[0] + ' 00:00:00';
      form.value.end = value[1] + ' 23:59:59';
    } else {
      form.value.start = '';
      form.value.end = '';
    }
  }
  function restFn() {
    form.value.nickname = '';
    form.value.mobile = '';
    form.value.date = [];
    form.value.start = '';
    form.value.end = '';
    searchFn()
  }
  function getListData() {
    tableOptions.loading = true;
    const { currentPage, pageSize } = pageOptions;
    const { nickname, mobile, start,end} = form.value;

    getPartnerListV2({
      mobile,
      nickname,
      endTime:end,
      startTime:start,
      page: currentPage ,
      pageSize,
    })
      .then(res => {
        const { content, totalElements } = res.data;
        if (content.length) {
          for (let i = 0; i < content.length; i++) {
            content[i].index = proxy.$handleIndex(i, pageOptions);
          }
        }
        tableOptions.data = content;
        tableOptions.loading = false;
        pageOptions.total = totalElements;
      })
      .catch(() => {
        tableOptions.loading = false;
      });
  }

  const searchFn = proxy.$debounce(() => {
    tableOptions.data = [];
    pageOptions.currentPage = 1;
    pageOptions.total = 0;

    getListData();
  });

  onMounted(() => {
    getListData();
  });
</script>

<style lang="scss" scoped>
  .next-manage-wrapper {
  }
  .btn-box{
    margin-top: -20px;
  }
</style>
